<template>
  <div class="total-box">
    <!-- 搜索 -->
    <div class="section1">
      <div class="section1-1">
        <i class="el-icon-search" @click="sousuo"></i>
        <input
          type="text"
          placeholder="请输入订单编号"
          v-model="filterText"
          class="input1"
          @input="textNone1($event)"
          @keyup.enter="textNone($event)"
        />
      </div>
    </div>
    <!-- 状态查询 -->
    <div class="section2">
      <div class="section2-1">
        <el-select v-model="value" placeholder="状态" @change="changeClick">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <!-- 表格数据 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="order_code" label="订单编号"></el-table-column>
        <el-table-column prop="user.user_name" label="用户名"></el-table-column>
        <el-table-column
          prop="wash_start_time"
          label="订单开始时间"
        ></el-table-column>
        <el-table-column
          prop="wash_end_time"
          label="订单结束时间"
        ></el-table-column>
        <el-table-column
          prop="washMachine.wash_machine_code"
          label="洗衣机编号"
        ></el-table-column>
        <el-table-column prop="order_remark" label="订单描述"></el-table-column>
        <el-table-column prop="consume_money" label="金额"></el-table-column>
        <el-table-column prop="order_state" label="状态">
          <template slot-scope="scope">
            <span
              v-text="scope.row.order_state === 1 ? '进行中' : '已完成'"
            ></span> </template
        ></el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageNum"
        layout="prev, pager, next, jumper"
        :total="drugList"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import http from '../api';
export default {
  data() {
    return {
      filterText: '',
      tableData: [],
      currentPage: 1,
      pageNum: 6,
      drugList: 0,
      options: [
        {
          value: 1,
          label: '进行中',
        },
        {
          value: 2,
          label: '已完成',
        },
      ],
      value: '',
    };
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    textNone(e) {
      console.log(e);
      this.getData();
    },
    textNone1(e) {
      if (e.target.value == '') {
        this.currentPage = 1;
        this.getData();
      }
    },
    modify(row, index) {
      // this.$refs.modifyinfo.open(row);
      //返回当前对象
      console.log(row, index);
    },
    sousuo() {
      console.log(1111);
      this.getData();
    },
    //点击下一页时
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.getData();
    },
    //下拉框值变化时
    changeClick(val) {
      this.value = val;
      this.currentPage = 1;
      this.getData();
    },
    //获取数据
    getData() {
      http
        .userOrderManage({
          params: {
            pages: this.currentPage,
            pageSize: 6,
            order_code: this.filterText,
            order_state: this.value,
          },
        })
        .then((r) => {
          console.log(r);
          this.drugList = r.data.counts;
          this.tableData = r.data.data;
        });
    },
  },
};
</script>
<style scoped>
.section1-1 {
  width: 190px;
  height: 40px;
  border: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  background-color: white;
  align-items: center;
}
.input1 {
  width: 150px;
  height: 30px;
  border: none;
  margin-left: 10px;
  outline: none;
}
.paging {
  margin-top: 30px;
  margin-left: 30%;
}

.el-pagination >>> .el-pagination__jump {
  font-size: 17px;
}
.el-pagination >>> .el-icon {
  font-size: 17px;
}
.el-pagination >>> .number {
  font-size: 17px;
  width: 60px;
}
.section2 {
  width: 190px;
  /* display: flex;
  justify-content: flex-end; */
  position: relative;
  left: 220px;
  top: -40px;
}
.total-box {
  background-color: white;
  padding-top: 30px;
  margin-top: 10px;
  height: 630px;
}
</style>